<script setup lang="ts">
import SgesCalC from './SgesCalC.vue'
import { ref } from 'vue'
import Canvas3D from './Create3D.vue'
import { useSgesCStore } from './storeSgesCalC'
//
const store = useSgesCStore()
const clientWidth = ref(window.innerWidth)

const sges = ref()

const persistData = () => { // 将SgesCalC组件的persistData方法暴露出去，使得菜单栏中的保存文件可以使用
  return sges.value.persistData()
}

const activeDrawer = ref(false)
const create3D = () => {
  /**
   * 获取SgesCalC的参数，生成3D模型
   */
  activeDrawer.value = true // 值为false，则d-drawer组件不会渲染，onMounted方法不会触发，同理，当值由true变为false时，会触发onUnmounted方法
}

defineExpose({
  persistData
})
</script>

<template>
  <!--  <canvas id="renderCanvas" touch-action="none"></canvas>-->
  <SgesCalC ref="sges" :create3D="create3D"></SgesCalC>

  <n-drawer
    v-model:show="activeDrawer"
    :default-width="clientWidth"
    placement="right"
    class="bg-blue-100 w-full"
    resizable
  >
    <Canvas3D ref="canvas"></Canvas3D>
  </n-drawer>
</template>

<style scoped lang="postcss">
</style>